<template>
    <div class="storeManage">
        <el-form :inline="true" size="small" :model="filterForm" class="demo-form-inline">
            <el-form-item label="城市：">
                <el-select v-model="filterForm.cityid" filterable placeholder="请选择城市">
                    <el-option
                            v-for="item in allCityList"
                            :key="item.cityId"
                            :label="item.city"
                            :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司名称：">
                <el-input v-model="filterForm.customerName" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="门店名称：">
                <el-input v-model="filterForm.storeName" placeholder="请输入门店名称"></el-input>
            </el-form-item>
            <el-form-item label="公司合作状态：">
                <el-select v-model="filterForm.status" placeholder="请选择合作状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="未合作" :value="0"></el-option>
                    <el-option label="合作中" :value="2"></el-option>
                    <el-option label="审核中" :value="1"></el-option>
                    <el-option label="审核不通过" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="门店归属：">
                <el-input v-model="filterForm.leaderNameOrLeaderPhone" placeholder="请输入姓名或手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="mb15">
            <el-button size="small" type="primary" @click="goHandlePage('new')">新建店铺</el-button>
            <el-button size="small" type="primary" v-if="isAssignAble" @click="batchAllocation">批量分配</el-button>
        </div>
        <el-table
                :data="tableData"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                border>
            <el-table-column
                    type="index"
                    align="center"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="selection"
                    v-if="isAssignAble"
                    align="center"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="storesCity"
                    align="center"
                    label="城市">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    align="center"
                    width="150"
                    label="公司名称">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    width="120"
                    label="公司合作状态">
                <template slot-scope="scope">
                    {{['未合作','审核中','合作中','审核不通过','合作终止'][scope.row.status]}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="storeNumber"
                    align="center"
                    width="120"
                    label="门店编码">
            </el-table-column>
            <el-table-column
                    prop="area"
                    align="center"
                    label="服务板块">
            </el-table-column>
            <el-table-column
                    prop="storesName"
                    width="150"
                    align="center"
                    label="门店名称">
            </el-table-column>
            <el-table-column
                    prop="storeCompetence"
                    label="权限">
            </el-table-column>
            <el-table-column
                    prop="house"
                    label="新房分佣比例">
                <template slot-scope="scope">{{scope.row.house === -1 ? '' : scope.row.house+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="insurance"
                    label="保险分佣比例">
                <template slot-scope="scope">{{scope.row.insurance === -1 ? '' : scope.row.insurance+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="property"
                    label="产权分佣比例">
                <template slot-scope="scope">{{scope.row.property === -1 ? '' : scope.row.property+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="新建时间">
            </el-table-column>
            <el-table-column
                    prop="leaderName"
                    label="门店归属">
                <template slot-scope="scope">{{scope.row.leaderName}} {{scope.row.leaderPhone}}</template>
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="职业经纪人签约人数">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    align="center"
                    width="150"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="goHandlePage('edit', scope.row.id, scope.row.storeNumber)">编辑
                    </el-button>
                    <el-button type="text" @click="handleDelete(scope.row.id, scope.row.storesName)">删除</el-button>
                    <el-button type="text" @click="goHandlePage('view', scope.row.id, scope.row.storeNumber)">详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="mt15"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="filterForm.pageSize"
                :current-page="filterForm.pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableDataTotal">
        </el-pagination>
        <!-- 批量分配弹窗 -->
        <el-dialog
                title="批量分配"
                :visible.sync="dialogVisible"
                width="400px">
            <div>
                <el-form :inline="true" size="small" :model="dialogForm" class="demo-form-inline">
                    <el-form-item label="门店归属：">
                        <el-select v-model="dialogForm.leaderId" filterable placeholder="请选择门店归属">
                            <el-option
                                    v-for="item in allOwnershipList"
                                    :key="item.leaderId"
                                    :label="item.leaderName + ' ' + item.leaderPhone"
                                    :value="item.leaderId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer tac">
                <el-button size="small" class="mr10" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="selectStoreOwner">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 拒绝批量分配弹窗 -->
        <el-dialog
                title="提示"
                :visible.sync="refuseDialogVisible"
                width="400px">
            <div>只有同一片区的的门店才可以进行批量操作！</div>
            <div slot="footer" class="dialog-footer tac">
                <el-button size="small" type="primary" @click="refuseDialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'storeManage',
        title: '经纪门店管理',
        data() {
            return {
                filterForm: {
                    cityid: '',
                    customerName: '',
                    storeName: '',
                    leaderNameOrLeaderPhone: '',
                    status: '',

                    pageSize: 10,
                    pageNum: 1,
                },
                dialogForm: {
                    leaderId: ''
                },
                isAssignAble: false,
                allCityList: [],
                allOwnershipList: [],
                tableDataTotal: 10,
                tableData: [],
                multipleSelection: [],
                dialogVisible: false,
                refuseDialogVisible: false
            }
        },
        mounted() {
            this.getPermissionStatus()
            this.getAllCity()
            this.getTableList()
        },
        activated() {
            this.getTableList()
        },
        methods: {
            reset() {
                this.filterForm = {
                    cityid: '',
                    customerName: '',
                    storeName: '',
                    leaderNameOrLeaderPhone: '',
                    status: '',

                    pageSize: 10,
                    pageNum: 1,
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            batchAllocation() {
                this.dialogForm.leaderId = '';
                if (this.multipleSelection.length) {
                    let regionId = this.multipleSelection[0].regionId;
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let item = this.multipleSelection[i];
                        if (this.multipleSelection[i].regionId !== regionId) {
                            this.refuseDialogVisible = true;
                            return false
                        }
                    }
                    if (regionId) {
                        // 获取当前城市下的 门店归属人
                        this.$axios.post("/cms/stores/stores/selectRegionLeaders", {
                            regionId: regionId
                        }).then((res) => {
                            this.allOwnershipList = res;
                            this.dialogVisible = true;
                        })
                    } else {
                        this.allOwnershipList = [];
                        this.dialogVisible = true;
                    }
                } else {
                    this.$message.warning("请至少选择一条数据")
                }
            },
            selectStoreOwner() {
                if (this.dialogForm.leaderId) {
                    const assigna = this.allOwnershipList.find((item) => {
                        return item.leaderId === this.dialogForm.leaderId
                    });
                    let stores = [];
                    this.multipleSelection.forEach((item) => {
                        stores.push({
                            id: item.id,
                            storeNumber: item.storeNumber,
                            serveId: item.sysCityAreasId
                        })
                    });
                    this.$axios.post("/cms/stores/stores/assignaStore", {
                        stores,
                        assigna
                    }).then((res) => {
                        this.$message.success('分配成功')
                        this.dialogVisible = false
                        this.getTableList()
                    }).catch(() => {
                        this.dialogVisible = false
                    })
                } else {
                    this.$message.warning("请选择门店归属人")
                }
            },
            query() {
                this.filterForm.pageNum = 1;
                this.getTableList()
            },
            goHandlePage(type, id, storeNumber) {
                this.$router.push({
                    path: '/storeManageHandle',
                    query: {type, id, storeNumber}
                })
            },
            handleDelete(storeId, storeName) {
                this.$confirm('确定是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("/cms/stores/stores/inDelectStore", {storeId, storeName}).then((res) => {
                        this.$message.success('删除成功')
                        this.getTableList()
                    })
                }).catch(() => {

                });
            },
            getTableList() {
                this.$axios.post("/cms/stores/stores/selectStore", this.filterForm).then((res) => {
                    this.tableData = res.list;
                    this.tableDataTotal = res.total;
                })
            },
            handleSizeChange(val) {
                this.filterForm.pageSize = val;
                this.getTableList()
            },
            handleCurrentChange(val) {
                this.filterForm.pageNum = val;
                this.getTableList()
            },
            getAllCity() {
                this.$axios.post('/city/cityList', {}).then((res) => {
                    this.allCityList = res.cityList
                })
            },
            getPermissionStatus() {
                this.$axios.post('/cms/stores/stores/selectRegionLeaderUser', {
                    userId: JSON.parse(sessionStorage.getItem("cmsUser")).userId
                }).then((res) => {
                    this.isAssignAble = res
                })
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">

</style>
